0<template>
    <div id="container">
        <!-- 导航栏 -->
        <van-nav-bar fixed :title="data.dtitle" style="font-weight: bold">
            <template #left>
                <van-icon style="padding: 16px;" name="revoke" color="#fdc03a" size="20" fixed
                    @click.native="$router.go(-1)" />
            </template>
        </van-nav-bar>
        <!-- 作者头像部分 -->
        <div id="header" style="margin-top: 4rem !important;">
            <div class="left">
                <!-- 头像 -->
                <div class="headericon">
                    <div>
                        <img :src="`http://39.108.211.154${this.writerIcon}`" alt="">
                    </div>
                    <div>
                        <span class="one">{{data.d_uname}}</span>
                        <span>游记达人</span>
                    </div>
                </div>
            </div>
            <!-- 地图 -->
            <span @click="$router.push(`/map?mid=${$route.query.id || $route.params.id}`)" class="right">
                
                地图
                <van-icon name="location"></van-icon>
            </span>
        </div>

        <div class="main" style="margin-bottom: 30px;">
            <div>
                <span class="address">{{this.addr}}</span>
            </div>
            <div class="img" style="margin-top: 10px;">
                <img :src="`http://39.108.211.154${this.data.dimg}`" alt="">
            </div>
            <p v-html="data.dtext" style="text-indent: 2em; letter-spacing: 3px; margin-top: 10px; line-height: 2em;">
            </p>
        </div>
        <!-- <div v-if="this.Commentitem.length>0" style="border-bottom: 1px sol    id white; box-shadow: 0 1px 5px 0 gray"></div> -->
        <!-- <van-nav-bar v-if="this.Commentitem.length>0" title="评论">
        </van-nav-bar> -->
        <comment-cell v-for="item in Commentitem" :key="item.did" :item="item" />
        <br>
        <br>
        <br>
        <!-- 底部导航 -->
        <mt-tabbar fixed v-model="selected" keep-alive="true"
            style=" box-shadow: 5px 5px 10px .2px; height: 6vh; background-color: #f5f5f5; ">

            <!-- 点击评论 如果登录跳转评论页 -->
            <mt-tab-item id="message" v-if="$store.state.user"
                @click.native="$router.push(`/comment?com_did=${com_did}`)"
                style="margin: auto 0; background-color: #f5f5f5; ">
                <img slot="icon" src="../assets/cs-img/message.png">
            </mt-tab-item>

            <!-- 点击评论 如果未登录跳转登录页 -->
            <mt-tab-item id="message" v-else @click.native="goHome"
                style="margin: auto 0; background-color: #f5f5f5; ">
                <img slot="icon" src="../assets/cs-img/message.png">
            </mt-tab-item>

            <!-- 点击点赞 -->
            <mt-tab-item v-if="$store.state.user" id="live" style="margin: auto 0; background-color: #f5f5f5; ">
                <img slot="icon" @click="this.lNum" :src="require(`../assets/cs-img/love${this.lnum?1:0}.png`) ">
            </mt-tab-item>
            <!-- 点击点赞 如果未登录跳转登录页 -->
            <mt-tab-item v-else @click.native="goHome" id="live"
                style="margin: auto 0; background-color: #f5f5f5; ">
                <img slot="icon" src="../assets/cs-img/love0.png">
            </mt-tab-item>

            <!-- 点击收藏 -->
            <mt-tab-item id="shoucang" v-if="$store.state.user" style="margin: auto 0; background-color: #f5f5f5; ">
                <img slot="icon" @click="this.Num" :src="require(`../assets/cs-img/shoucang${this.num?1:0}.png`) ">
            </mt-tab-item>
            <!-- 点击收藏 如果未登录跳转登录页 -->
            <mt-tab-item id="shoucang" v-else @click.native="goHome"
                style="margin: auto 0; background-color: #f5f5f5; ">
                <img slot="icon" src="../assets/cs-img/shoucang0.png">
            </mt-tab-item>
        </mt-tabbar>

    </div>
</template>

<script>
import CommentCell from '@/components/CommentCell.vue'
import { Dialog } from "vant";
export default {
    components: { CommentCell },
    data() {
        return {
            selected: 'message',
            data: [], //详情页数据
            Commentitem: [], //当页评论数据
            num: false, //控制收藏按钮
            lnum: false, //控制点赞按钮
            // writer: [],
            com_did: 0, //用于跳转评论页面
            addr: '', //保存地址
            uname: '', //保存作者名
            writerIcon: [], //保存作者头像
        }
    },
    watch: {
        //收藏按钮发生变化重新请求数据
        num() {
            let selUcoUrl = `http://39.108.211.154:8080/check_uco?uco_username=${this.$store.state.user}&uco_did=${this.$route.query.id || this.$route.params.id}`
            this.axios.get(selUcoUrl).then(res => {
                // console.log('收藏：', res);
                if (res.data == '已收藏') {
                    this.num = true
                } else {
                    this.num = false
                }
            })
        },
        //点赞按钮发生变化重新请求数据
        lnum() {
            let selLikeUrl = `http://39.108.211.154:8080/check_like?like_username=${this.$store.state.user}&like_did=${this.$route.query.id || this.$route.params.id}`
            this.axios.get(selLikeUrl).then(res => {
                // console.log('点赞：', res);
                if (res.data == '已点赞') {
                    this.lnum = true
                } else {
                    this.lnum = false
                }
            })
        }
    },
    mounted() { // 进入当前页后立即加载一次
        // console.log(this.$store.state);
        let id = this.$route.params.id || this.$route.query.id
        // console.log(id);
        // console.log('当前路由信息:', this.$route);

        // 获取地址当前景点的地址
        let addrsURL = `http://39.108.211.154:8080/list_text?did=${this.$route.params.id || this.$route.query.id}`
        this.axios.get(addrsURL).then(res => {
            // console.log('当前景点地址:', res);
            this.addr = res.data[0].lname

        })
        //当前详情页数据
        let url = `http://39.108.211.154:8080/detail_text?did=${id}`
        this.axios.get(url).then(res => {
            // console.log('当前页详情:', res);
            this.data = res.data[0]
            // console.log('作者信息1', res.data[0].d_uname);
            this.uname = res.data[0].d_uname
            let wUrl = `http://39.108.211.154:8080/user_uname?uname=${this.uname}`
            this.axios.get(wUrl).then(res => {
                console.log('作者信息2：', res);
                this.writerIcon = res.data[0].uimg
            })
        })

        // 当前页评论数据
        let commentUrl = ` http://39.108.211.154:8080/text_comment?did=${id}`
        this.axios.get(commentUrl).then(res => {
            // console.log('评论：', res);
            this.Commentitem = res.data
            this.com_did = id
        })

        // 查询所有被收藏和点赞
        this.getUco()
        this.getLnum()

    },
    methods: {
        // 收藏被触发请求添加数据
        Num() {
            this.num = !this.num
            if (this.num == true) {
                let url = ` http://39.108.211.154:8080/uco_detail`
                let params = `uco_username=${this.$store.state.user}&uco_did=${this.$route.query.id || this.$route.params.id}`
                this.axios.post(url, params).then(res => {
                    // console.log(res);
                })
                // 收藏后数量+1
                let updataUcourl = `http://39.108.211.154:8080/update_uco?username=${this.$store.state.user}`
                this.axios.get(updataUcourl).then(res => {
                    // console.log('收藏数+1:', res);
                })
            } else if (this.num == false) { //收藏被取消删除数据
                let url = `http://39.108.211.154:8080/unuco_detail`
                let params = `uco_username=${this.$store.state.user}&uco_did=${this.$route.query.id || this.$route.params.id}`
                this.axios.post(url, params).then(res => {
                    // console.log(res);
                })
                // 取消收藏后数量-1
                let updateunUcoUrl = `http://39.108.211.154:8080/update_unuco?username=${this.$store.state.user}`
                this.axios.get(updateunUcoUrl).then(res => {
                    // console.log('收藏数-1:', res);
                })
            }
        },
        // 请求所有点赞数据
        getUco() {
            this.axios.get(`http://39.108.211.154:8080/uco`).then(res => {
                // console.log('所有被收藏', res);
                if (res.data.length > 0) {
                    this.num = ''

                } else if (res.data.length = 0) {
                    this.num = false
                }
            })
        },

        // 点赞被触发请求添加数据
        lNum() {
            // 判断用户是否点赞
            this.lnum = !this.lnum
            if (this.lnum == true) {
                let url = ` http://39.108.211.154:8080/like_detail`
                let params = `like_username=${this.$store.state.user}&like_did=${this.$route.query.id || this.$route.params.id}`
                this.axios.post(url, params).then(res => {
                    // console.log(res);
                })
                // 点赞后数量+1
                let url2 = `http://39.108.211.154:8080/update_like?username=${this.$store.state.user}`
                this.axios.get(url2).then(res => {
                    // console.log('点赞数+1:', res);
                })
            } else if (this.lnum == false) { //点赞被取消请求添加数据
                let url = `http://39.108.211.154:8080/unlike_detail`
                let params = `like_username=${this.$store.state.user}&like_did=${this.$route.query.id || this.$route.params.id}`
                this.axios.post(url, params).then(res => {
                    // console.log(res);
                })
                // 取消点赞后数量-1
                let url2 = `http://39.108.211.154:8080/update_unlike?username=${this.$store.state.user}`
                this.axios.get(url2).then(res => {
                    // console.log('点赞数-1:', res);
                })
            }
        },
        // 请求所有点赞数据
        getLnum() {
            let url = `http://39.108.211.154:8080/like`
            this.axios.get(url).then(res => {
                // console.log('所有被点赞：', res);
                if (res.data.length > 0) {
                    this.lnum = ''
                } else if (res.data.length = 0) {
                    this.lnum = false
                }
            })
        },
        // 登录之后跳转回原页面
        goHome() {
            Dialog.confirm({
                message: "您还未登录!",
                confirmButtonColor: 'rgb(255, 153, 0)',
                confirmButtonText: '去登录',
                width: '75vw'
            }).then(() => {
                this.$router.replace({
                path: '/login',
                query: {
                    redirect: this.$router.currentRoute.fullPath
                }
            })
            }).catch(() => {
            });;
        },
    },

}
</script>

<style lang="scss" scoped>
$subject-color: #fdc03a;

#container {
    margin: 0 12px 12px 12px;

    #header {
        margin-top: 10px;
        height: 20vw;
        display: flex;
        justify-content: space-between;

        .left {
            display: flex;
            width: 50vw;
            margin: auto 0;

            .headericon {
                display: flex;

                :first-child {
                    border-radius: 50px;
                    overflow: hidden;
                }

                div:nth-child(2) {
                    display: flex;
                    flex-flow: column;
                    font-size: 15px;

                    :last-child {
                        border-radius: 12px;
                        background-color: $subject-color;
                        color: white;
                        font-size: 12px;
                        margin-top: 5px;
                        width: 48px;
                    }

                    span {
                        padding: 3px;
                        margin-left: 5px;

                    }
                }

                img {
                    width: 3.5em;
                }
            }
        }

        .right {
            margin: auto 0;
            padding: 5px 10px;
            border-radius: 17px;
            background-color: $subject-color;

        }

    }

    .main {
        margin-top: 5vw;

        .address {
            display: inline-block;
            padding: 3px 5px;
            border-radius: 20px;
            color: white;
            background-color: green;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .title {
            font-size: 18px;
            font-weight: 500;
            color: black;
            letter-spacing: 1px;
            margin-bottom: 25px;
        }

        .img>img {
            width: 100%;
        }
    }

}

#header>.left>img {
    width: 7vw;
    height: 7vw;
    margin: auto 0;
}

.van-nav-bar .van-icon {
    color: black;
}

.van-nav-bar__text {
    color: black !important;
}

::v-deep .van-nav-bar__left {
    padding: 0;
}

#header {
    margin-top: 2em !important;
}

.comment {
    border: 1px solid red;
}
</style>